<template>
  <div class="spCondition" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;">
    <div style="display: inline;" class="gzForm">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="" class="input_large">
          <el-input placeholder="工装编号" v-model="queryForm.gzCode"></el-input>
        </el-form-item>
        <el-form-item label="" class="search_select">
          <el-select clearable v-model="queryForm.status" filterable placeholder="状态">
            <el-option v-for="item in spStatusList" :key="item.value" :label="item.name" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search" @click="getGzSpecialConditionList">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="add_new" v-if="hasRole('tk:gz:add')" @click="addSpecialGz"> 
    	<span><i class="fa fa-plus" aria-hidden="true"></i> 新建特况 </span> 
    </div>
    <!--<div style="display: inline;float: right;margin-top: -40px" class="add add_zl" v-if="hasRole('tk:gz:add')" @click="addSpecialGz">
      <span  style="cursor: pointer !important;background-color: #f2a221;border-radius: 5px;color: white;padding-top: 8px;padding-bottom: 6px;padding-left: 10px;padding-right: 17px;display: inline-block;font-size: 14px;">
        <i class="fa fa-plus" aria-hidden="true"></i>
        <label style="cursor: pointer"> 新特况</label>
      </span>
    </div>-->
    <wh-table :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option" style="margin-top: 5px">
      <template slot-scope="props" slot="operate">
        <div> 
        	<span class="caozuo_span">
        		<a v-if="hasRole('tk:gz:see')" @click="seeSpecialGz(props.rowData)">查看</a>
        	</span> 
        	<span class="caozuo_span">
        		<a v-if="hasRole('tk:gz:handle')" v-show="props.rowData.spStatus =='0'"  @click="handleSpecialGz(props.rowData)">处理</a>
        	</span> 
        	<span class="caozuo_span">
        		<a v-if=" hasRole('tk:gz:delete')" @click="deleteSpecialGz(props.rowData)">删除</a>
        	</span> 
        </div>
      </template>
    </wh-table>
    <edit-special-con :dataDetail="dataDetail" :type="type"></edit-special-con>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import editSpecialCon from './editSpecialCon';
  import { getToken } from '@/utils/auth' // 验权
  import { formatDate } from '@/utils/formatDate'
  export default {
    name: 'gzSpecialCon',
    data() {
      return {
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        option: {
          showOperate: false,
          headerCell: {
            background: 'rgb(214, 215, 216)',
            color: 'rgba(0, 0, 0, 0.8)'
          }
        },
        dataDetail: {},
        type: "",
        queryForm: {
          gzCode: "",
          status: ""
        },
        spStatusList: [{
          name: "待处理",
          value: "0"
        }, {
          name: "已处理",
          value: "1"
        }]
      }
    },
    components: {
      whTable,
      editSpecialCon
    },
    mounted() {
      let self = this;
      self.getGzSpecialConditionList();
      self.$eventBus.$on("updateSpecialCondition", function(type) {
        self.queryForm.gzCode = "";
        self.queryForm.status = "";
        self.getGzSpecialConditionList();
      })
    },
    methods: {
      handleDefaultTab() {
        let self = this;
        self.tableHeader =  [{"columnName": "createTime", "coloumNameCn": "日期"},
          {"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "carType", "coloumNameCn": "车型","width":75},
          {"columnName": "gzCode", "coloumNameCn": "工装编码"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "kuWeiCode", "coloumNameCn": "库位码","width":75},
          {"columnName": "remark", "coloumNameCn": "说明"},
          {"columnName": "userName", "coloumNameCn": "提交人"},
          {"columnName": "spStatus", "coloumNameCn": "状态","tag":true,"width":85}];        self.option.showOperate = true;
      },
      addSpecialGz() {
        let user = JSON.parse(getToken());
        let userName = user.userDetail.userName;
        this.dataDetail = {
          id: "",
          gzId: "",
          userName: userName,
          remark: "",
          spStatus: ""
        };
        this.type = "add";
      },
      seeSpecialGz(rowData) {
        this.type = "edit";
        this.dataDetail = Object.assign({}, rowData);
      },
      handleSpecialGz(rowData) {
        this.type = "handle";
        this.dataDetail = Object.assign({}, rowData);
      },
      deleteSpecialGz(rowData) {
        let self = this;
        let param = {
          id: rowData.id,
          status: "-1"
        };
        self.$confirm('确定删除该信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/specialCondition/updateSpecialCondition",
            method: "post",
            params: param
          }).then(resp => {
            if(resp.success) {
              self.getGzSpecialConditionList();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'success'
              });
              return
            }
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      },
      getGzSpecialConditionList() {
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/specialCondition/querySpecialConditionList",
          method: "post",
          params: self.queryForm,
        }).then(resp => {
          if(resp.success) {
            self.handleDefaultTab();
            for(let data of resp.result) {
              data.createTime = formatDate(new Date(data.createTime), "yyyy-MM-dd");
            }
            self.tableData = resp.result;
            self.tableLoading = false;
          }
        });
      }
    }
  }
</script>
<style scoped>
  .spCondition .el-form--inline .spCondition .el-form-item {
    margin-right: 3px;
  }
  .spCondition .el-select__tags {
    max-width: none !important;
  }
  .spCondition .el-date-editor.el-input,
  .spCondition .el-date-editor.el-input__inner {
    width: auto;
  }
  .spCondition .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .gzForm .el-form-item {
    margin-bottom: 0px !important;
  }
  .spCondition .search {
    background: #34bfc6;
    border-color: #34bfc6;
  }
  .spCondition .el-button--medium {
    padding: 5px 9px !important;
  }
  .add .el-button--medium {
    padding: 15px 30px !important;
  }
  .spCondition .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
  .input_large .el-input__inner {
    padding: 0 5px;
  }
</style>